/* eslint-disable */
import React from 'react';
import Chart from 'echarts-for-react';
import { Tabs } from 'antd';
const TabPane = Tabs.TabPane;
import echarts from 'echarts';
import styles from './MybarRight.less';
import request from '../../../utils/request';
// let data = {
//     time:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'],
//     value:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
// }
const style = {
    color: '#fff',
    marginLeft: '50%',
    position: 'absolute',
    zIndex: 100,
    fontSize: 12,
};
const factorList = ['SO2', 'NOx', 'HCI', 'CO'];
const factorCode = ['SO2', 'NOx', 'HCI', 'CO'];
class MybarRight extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            activeKey: 'SO2',
            dataList: '',
            tiesha: true
        };
    }
    componentDidMount() {


        // request({
        //     url: `/web/redstar/cockpitport/riverWaterQuality`,
        //     method: 'POST',
        //     data: { index: this.state.activeKey, riverway: this.state.tiesha ? '贴沙河' : '新开河' }

        // }).then(data => {
        //     let dataList = data.ret;

        //     this.setState({
        //         dataList
        //     })
        //     this.changeKey = setInterval(() => {
        //         let nowKey = factorCode.indexOf(this.state.activeKey);
        //         let newKey;
        //         if (nowKey < 8) {
        //             newKey = factorCode[nowKey + 1];
        //         } else {
        //             newKey = factorCode[0];
        //         }
        //         this.onTabClick(newKey);
        //         this.setState({
        //             activeKey: newKey
        //         })
        //     }, 10000);
        // })



    }
    // componentWillUnmount() {
    //     clearTimeout(this.changeKey)
    // }
    // onTabClick = (key) => {
    //     request({
    //         url: `/web/redstar/cockpitport/riverWaterQuality`,
    //         method: 'POST',
    //         data: { index: key, riverway: this.state.tiesha ? '贴沙河' : '新开河' }

    //     }).then(data => {
    //         // console.log(data)
    //         let dataList = data.ret;
    //         this.setState({
    //             activeKey: key,
    //             dataList
    //         })
    //     })
    // };

    onBtn = (v) => {
        this.setState({
            tiesha: v
        })

    }

    setOption = () => {
        let myOption;
        let data = this.state.dataList;

        myOption = {
            textStyle: { color: '#fff' },
            color: '#2EC2FF',
            tooltip: {
                confine: true,
                trigger: 'axis',
                // formatter: function (params) {
                //     return `日期 : ${data.time[params[0].dataIndex] ? data.time[params[0].dataIndex] : 0}` + '<br/>' + params[0].seriesName + ':' + params[0].data + '<br/>' + `限值 : ${data.standard ? data.standard : 0}` + '<br/>' + `背景值 : ${data.background ? data.background : 0}`
                // }
            },
            grid: {
                top: '35%', 
                left: '4%',
                right: '6%',
                bottom: '8%',
                containLabel: true
            },
            calculable: true,
            xAxis: [
                {
                    axisLine: { lineStyle: { color: '#144B59' } },
                    type: 'category',
                    // data: data.time,
                    data: ['01-01','01-02','01-03','01-04','01-05']
                }
            ],
            yAxis: [
                {
                    axisLine: { lineStyle: { color: '#144B59' } },
                    splitLine: { lineStyle: { color: '#063436', type: 'dashed' } },
                    type: 'value',
                    // name:this.state.activeKey == 'cr'?'(mg/L)':'(ug/L)',
                    // max: function (value) {
                    //     return value.max < Number(data.standard > data.background ? data.standard : data.background) ? Number(data.standard > data.background ? data.standard : data.background) : value.max
                    // }
                },

            ],
            series: [
                {
                    name: '实时值',
                    type: 'bar',
                    // data: data.value,
                    data: [25,12,3,8,84],
                    // markLine: {
                    //     data: [
                    //         {
                    //             yAxis: data.standard, name: '限值', itemStyle: {

                    //                 normal: {
                    //                     color: '#D0C047', type: 'dashed',
                    //                 }
                    //             }
                    //         },
                    //         { yAxis: data.background, name: '限值' ,itemStyle:{
                            
                    //             normal: {
                    //                 color:'blue',type:'dashed',
                    //             }
                    //         } },
                    //     ],

                    // },
                    itemStyle: {
                        normal: {
                            barBorderRadius: 3,
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    { offset: 0.5, color: '#70D7FF' },
                                    { offset: 1, color: '#1C5D7C' }
                                ]
                            )
                        }
                    },
                },

            ]
        };
        return myOption;
    };
    render() {

        return (
            <div className={styles.Tabs} style={{ width: "100%", height: "110%", position: 'relative' }}>
                <div style={{ color: '#fff', position: 'absolute', top: '-20px', right: 15, zIndex: 15 }}>
                    <span className={styles.titleBtn1} style={{ backgroundImage: `url(${this.state.tiesha ? require('../../../assets/tabBtn.png') : ''})` }} onClick={this.onBtn.bind(this, true)}>一周</span>
                    <span style={{ backgroundImage: `url(${!this.state.tiesha ? require('../../../assets/tabBtn.png') : ''})` }} className={styles.titleBtn1} onClick={this.onBtn.bind(this, false)}>一个月</span>
                    <span style={{ backgroundImage: `url(${!this.state.tiesha ? require('../../../assets/tabBtn.png') : ''})` }} className={styles.titleBtn1} onClick={this.onBtn.bind(this, false)}>三个月</span>
                </div>
                <Tabs
                    tabBarStyle={style}
                    defaultActiveKey="0"
                    tabBarGutter={-5}
                    size="small"
                    style={{ width: '100%', height: '100%' }}
                    activeKey={this.state.activeKey}
                    onChange={this.onTabClick}>

                    {
                        factorList.map((index, key) => {
                            return (
                                <TabPane tab={index} key={factorCode[key]}

                                >
                                    <Chart
                                        option={this.setOption()}
                                        notMerge
                                        lazyUpdate
                                        style={{ height: "90%" }}
                                    />
                                </TabPane>
                            )
                        })
                    }
                </Tabs>
            </div>
        )
    }
}
export default MybarRight;
